<!-- 新增、编辑 -->

<template>
  <el-dialog
    :model-value="dialogFormVisible"
    :destroy-on-close="true"
    :title="dialogTitle"
    width="450px"
    @close="emits('closeDialog')"
  >
    <el-form ref="dialogFormRef" :model="dialogForm">
      <el-form-item label="用户id" :label-width="formLabelWidth">
        <el-input v-model="dialogForm.uid" />
      </el-form-item>
      <el-form-item label="bdId" :label-width="formLabelWidth">
        <el-input v-model="dialogForm.bd_id" />
      </el-form-item>

      <el-form-item label="备注" :label-width="formLabelWidth">
        <el-input v-model="dialogForm.remark" />
      </el-form-item>
      <el-form-item label="状态" :label-width="formLabelWidth">
        <el-select v-model="dialogForm.status" placeholder="状态">
          <el-option label="生效" :value="0" />
          <el-option label="失效" :value="1" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="emits('cancel')">取消</el-button>
        <el-button type="primary" @click="submit(dialogForm)" :loading="btnLoading">提交</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup>
import { ref } from "vue";

const dialogFormRef = ref(null);

defineProps({
  dialogFormVisible: {
    type: Boolean,
    default: false
  },
  dialogForm: {
    type: Object,
    default: {
      uid: "",
      bd_id: "",
      remark: "",
      status: 0
    }
  },
  btnLoading: {
    type: Boolean,
    default: false
  },
  dialogTitle: {
    type: String,
    default: ""
  }
});
const emits = defineEmits(["closeDialog", "cancel", "submitForm"]);

const formLabelWidth = "140px";

// 提交
const submit = dialogForm => {
  dialogFormRef.value
    .validate()
    .then(async () => {
      try {
        emits("submitForm", dialogForm);
      } catch (error) {
        console.log(error);
      }
    })
    .catch(error => {
      console.log(error);
    });
};
</script>
